<template>
  <el-tabs type="border-card" v-model="activeName">
	  <el-tab-pane label="处理" name="tab-one">
      <div class="pane-box">
        <div v-show="trialShow">
          <el-form ref="form" :model="form" label-width="0px">
            <div class="trial radio-box">
              <p>初审备注
                <span class="trial-title-right" @click="showLogs()">查看全部{{lastRemark.count}}条记录</span>
              </p>
              <div class="trial-content" v-if="lastRemark.check_remark === ''">
                无
              </div>
              <div class="trial-content" v-else>
                {{lastRemark.check_remark}}
              </div>
              <div class="trial-content trial-tips" v-if="lastRemark.show_refund === 1">
                <svg-icon icon-class="ds-excla" />建议退款
              </div>
            </div>
            <el-form-item style="text-align:center;" class="check-group">
              <el-radio-group v-model="checks" size="medium">
                <el-radio-button label="1" class="tabRadio">核实成功</el-radio-button>
                <el-radio-button label="2" class="tabRadio">核实失败</el-radio-button>
                <el-radio-button label="3" class="tabRadio">放弃核实</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <div class="tab" v-if="checks === '1'">
              <div class="trial">
                <p>检查项</p>
              </div>
              <div class="trial trial2 radio-box">
                <el-scrollbar>
                  <template v-for="(item, index) in radios">
                    <el-form-item :key="index" :label="(index+1)+'.'+item">
                      <el-radio-group v-model="checkRadios[index]" @change="checkRadioList()">
                        <el-radio label="1">通过</el-radio>
                        <el-radio label="2">不通过</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </template>
                </el-scrollbar>
              </div>
              <el-form-item class="textarea" label="通话编号（选填）">
                <el-input v-model="form.call_num" style="width: 100%" clearable></el-input>
              </el-form-item>
              <el-form-item class="textarea" label="复审备注（选填）">
                <el-input type="textarea" v-model="form.check_remark" resize="none" style="width: 100%"></el-input>
              </el-form-item>
              <div class="use-botton">
                <el-button type="primary" :disabled="refdis" @click="refund">退款</el-button>
                <el-button type="primary" :disabled="refdis" @click="reject">驳回</el-button>
                <el-button type="primary" :disabled="passdis" @click="pass">通过</el-button>
              </div>
            </div>
            <div class="tab" v-if="checks === '2'">
              <el-form-item class="textarea" label="通话编号（选填）">
                <el-input v-model="call.call_num" style="width: 100%" clearable></el-input>
              </el-form-item>
              <el-form-item class="textarea" label="回访结果">
                <el-select class="filter-item" style="width:100%" @change="checkCall()" v-model="call.call_result" placeholder="请选择">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="textarea" label="回访备注">
                <el-input type="textarea" v-model="call.call_remark" @input="checkCall()" resize="none" style="width: 100%"></el-input>
              </el-form-item>
              <div class="order-button">
                <el-button type="primary" :disabled="calldis" @click="callHandle">创建回访记录</el-button>
              </div>
            </div>
            <div class="tab" v-if="checks === '3'">
              <el-form-item class="textarea" label="复审备注">
                <el-input type="textarea" v-model="form.check_forgive_remark" @input="checkForgive()" resize="none" style="width: 100%"></el-input>
              </el-form-item>
              <div class="use-botton">
                <el-button type="primary" :disabled="forgivedis" @click="refund">退款</el-button>
                <el-button type="primary" :disabled="forgivedis" @click="pass">通过</el-button>
              </div>
            </div>
          </el-form>
        </div>
        <div v-show="rejectShow">
          <el-form ref="form" :model="form" label-width="80px">
            <div class="trial">
              <p>话术分类</p>
                <el-select v-model="wordCate" @change="getWordsList" style="width:100%" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.type_id"
                    :label="item.sub_type_name"
                    :value="item.type_id">
                  </el-option>
                </el-select>
            </div>
            <div class="classify" style="width:100%;padding-right:0px">
                <ul>
                  <li v-for="(item, index) in wordList" v-bind:key="index" @click="change_reject(item.t_content)">{{item.t_title}}</li>
                </ul>
            </div>
            <el-form-item class="textarea" :label="refuseName[refuseStatus] + '话术'">
              <el-input type="textarea" v-model="form.reject" @blur="focusState = false" v-focus="focusState" @input="check_reject()" @focus="check_reject()" resize="none" style="width:100%"></el-input>
            </el-form-item>
          </el-form>
          <div class="use-botton">
            <el-button type="primary" @click="backBtn">取消</el-button>
            <el-button type="primary" :disabled="refhandis" @click="sureReject">{{refuseName[refuseStatus]}}</el-button>
          </div>
        </div>
      </div>
	  </el-tab-pane>
	  <el-tab-pane  class="check" label="回访记录" name="tab-two">
      <div v-if="isNull === true" class="no-pic">
        <img :src="nullPng" width="40%" alt="logo">
        <p>暂无回访记录</p>
      </div>
      <div v-else>
        <el-scrollbar wrapStyle="height: 1000px;padding: 0 25px;overflow-y: scroll;">
          <ul>
            <li v-for="(item,index) in callList" v-bind:key="index">
              <div class="title">
                <i>{{callArr[index]}}</i>
                <span>{{item.call_result}}</span>
                <p>操作员：<span>{{item.truename}}</span></p>
              </div>
              <div class="content">
                <span class="time">{{item.insert_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                <div>
                  <span>{{item.call_remark === '' ? '无' : item.call_remark}}</span>
                  <span v-if="item.call_num !== '' && item.call_num !== undefined">通话编号：{{item.call_num === '' ? '无' : item.call_num}}</span>
                </div>
              </div>
            </li>
          </ul>
        </el-scrollbar>
      </div>
	  </el-tab-pane>
	  <el-tab-pane  class="check" label="审核记录" name="tab-three">
      <div>
        <component :is="checkList" :oid="param.id"></component>
      </div>
	  </el-tab-pane>
	  <el-tab-pane  class="check bankcard" label="银行卡" name="tab-four">
      <div class="pane-box">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            {{userinfo.username}}
          </el-form-item>
          <el-form-item label="身份证号">
            {{userinfo.identity}}
          </el-form-item>
          <el-form-item label="银行卡" v-if="userinfo.card_num === ''">
            <el-input style="width: 100%; font-size:12px" :clearable="true" :maxlength="22" @change="checkCard()" @keyup.native="checkCard()" v-model="card_num"></el-input>
          </el-form-item>
          <el-form-item label="银行卡" v-else>
            {{userinfo.card_num}}
          </el-form-item>
          <el-form-item label="所属银行" v-if="userinfo.card_num !== ''">
            {{userinfo.bank_name}}
          </el-form-item>
          <div class="order-button" v-if="userinfo.card_num === ''">
            <el-button type="primary" :disabled="carddis" @click="handleBindCard">绑定</el-button>
          </div>
        </el-form>
      </div>
	  </el-tab-pane>
	</el-tabs>
</template>

<script>
import { secondCheckList, secondCheck, secondCall, secondLastRemark, getCallList, getUserinfo, addBankCard } from '@/api/order'
import { typeList, getWordsList } from '@/api/group'
import checklist from '@/components/logs/checklist' // 订单详情组件
import { subBankCard } from '@/utils'
import nullPng from '@/assets/common_images/null.png'

export default {
  components: { checklist },
  data() {
    return {
      checkList: 'checklist',
      nullPng: nullPng,
      isNull: true,
      scroll: '',
      param: this.$route.params,
      trialShow: true,
      rejectShow: false,
      wordCate: '',
      wordList: [],
      activeName: 'tab-one',
      refdis: true,
      passdis: true,
      calldis: true,
      carddis: true,
      forgivedis: true,
      refhandis: true,
      lastRemark: {},
      focusState: false,
      userinfo: {},
      card_num: '', // 银行卡号
      card: {
        oid: this.$route.params.id,
        card_num: '' // 银行卡号
      },
      form: {
        oid: this.$route.params.id,
        check_item: [],
        call_num: '',
        check_remark: '',
        check_forgive_remark: '',
        reject: '',
        back: ''
      },
      call: {
        oid: this.$route.params.id,
        call_num: '',
        call_result: '',
        call_remark: ''
      },
      callList: [],
      callArr: [],
      allCkList: [],
      ckArr: [],
      refuseName: ['退款', '驳回'],
      refuseStatus: 0,
      statusOptions: [{ // 复审回访list
        value: 0,
        label: '请选择'
      }, {
        value: 1,
        label: '无人接听'
      }, {
        value: 2,
        label: '拒绝接听'
      }, {
        value: 3,
        label: '空号'
      }, {
        value: 4,
        label: '挂断'
      }, {
        value: 5,
        label: '号码错误'
      }, {
        value: 6,
        label: '暂无时间'
      }, {
        value: 7,
        label: '其它原因'
      }],
      options: [],
      radios: [],
      checkRadios: [],
      checks: '1'
    }
  },
  mounted() {
    this.getCheckList()
    this.getLastRemark()
    this.getCallList()
    this.getUserinfo()
  },
  directives: {
    focus: {
      // 指令的定义
      update: function(el) {
        el.firstChild.focus()
      }
    }
  },
  methods: {
    getCheckList() {
      secondCheckList({ id: this.param.id }).then(response => {
        this.radios = response.data
        for (var i = 0; i < this.radios.length; i++) {
          this.form.check_item.push({})
          this.$set(this.form.check_item[i], this.radios[i], false)
        }
      })
    },
    getLastRemark() {
      secondLastRemark({ oid: this.param.id }).then(response => {
        this.lastRemark = response.data
      })
    },
    getCallList() {
      getCallList({ oid: this.param.id }).then(response => {
        this.callList = response.data
        const len = this.callList.length
        for (const k in this.callList) {
          this.callArr[k] = len - k
        }
        if (len > 0) {
          this.isNull = false
        }
      })
    },
    getUserinfo() {
      getUserinfo({ oid: this.param.id }).then(response => {
        this.userinfo = response.data
      })
    },
    showLogs() {
      this.activeName = 'tab-three'
    },
    refund() {
      this.getWordsCate() // 刷新话术分类列表
      this.form.reject = ''
      this.refuseStatus = 0
      this.trialShow = false
      this.rejectShow = true
    },
    reject() {
      this.getWordsCate() // 刷新话术分类列表
      this.form.reject = ''
      this.refuseStatus = 1
      this.trialShow = false
      this.rejectShow = true
    },
    // 获取话术二级分类列表
    getWordsCate() {
      typeList({ tid: 1 }).then(response => {
        this.options = response.data
        this.wordCate = this.options[0].type_id
        this.getWordsList()
      })
    },
    // 获取话术二级内容列表
    getWordsList() {
      getWordsList({ type_id: this.wordCate }).then(response => {
        this.wordList = response.data.data
      })
    },
    // 检查项复选框检测
    checkRadioList() {
      const oldlength = this.radios.length
      const newlength = this.checkRadios.length
      let status = true
      for (var i = 0; i < oldlength; i++) {
        if (this.checkRadios[i] === undefined) {
          status = false
        }
      }
      if (oldlength > newlength || !status) {
        this.refdis = true
        this.passdis = true
      } else {
        if (this.checkRadios.indexOf('2') > -1) {
          this.refdis = false
          this.passdis = true
        } else {
          this.refdis = false
          this.passdis = false
        }
      }
    },
    checkCall() {
      if (this.call.call_result !== '' && this.call.call_result !== 0 && this.call.call_remark !== '') {
        this.calldis = false
      } else {
        this.calldis = true
      }
    },
    checkCard() {
      this.card_num = this.card_num.replace(/[^\d]/ig, '')
      const len = this.card_num.length
      if (len > 15 && len < 20) { // 银行卡号要在16到19位之间
        this.carddis = false
      } else {
        this.carddis = true
      }
      this.card_num = subBankCard(this.card_num)
    },
    checkForgive() {
      if (this.form.check_forgive_remark !== '') {
        this.forgivedis = false
      } else {
        this.forgivedis = true
      }
    },
    check_reject() {
      if (this.form.reject !== '') {
        this.refhandis = false
      } else {
        this.refhandis = true
      }
    },
    change_reject(val) {
      this.form.reject = val
      this.focusState = true
    },
    sureReject() {
      this.form.reject_reason = this.form.reject
      for (var i = 0; i < this.radios.length; i++) {
        this.$set(this.form.check_item[i], this.radios[i], this.checkRadios[i + 1])
      }
      if (this.refuseStatus === 0) {
        this.form.check_result = '4' // 退款
      } else if (this.refuseStatus === 1) {
        this.form.check_result = '1' // 驳回
      }
      if (this.checks === '1') { // 核实成功
        this.form.call_result = '1'
      } else if (this.checks === '3') { // 放弃核实
        this.form.call_num = ''
        this.form.check_item = [] // 放弃核实的时候，不要检查项
        this.form.call_result = '3'
        this.form.check_remark = this.form.check_forgive_remark // 赋值
      }
      // 调取审核接口
      secondCheck(this.form).then(response => {
        this.$message({
          message: this.refuseName[this.refuseStatus] + '完成',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$router.push({ path: '/order/dashboard' })
          }
        })
      })
    },
    backBtn() {
      this.trialShow = true
      this.rejectShow = false
    },
    callHandle() {
      secondCall(this.call).then(response => {
        this.$message({
          message: '创建回访记录成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$router.push({ path: '/order/dashboard' })
          }
        })
      })
    },
    handleBindCard() {
      this.card.card_num = this.card_num.replace(/[^\d]/ig, '')
      addBankCard(this.card).then(response => {
        this.$message({
          message: '银行卡绑定成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$router.go(0)
          }
        })
      })
    },
    pass() {
      for (var i = 0; i < this.radios.length; i++) {
        this.$set(this.form.check_item[i], this.radios[i], this.checkRadios[i + 1])
      }
      this.form.check_result = '2'
      if (this.checks === '1') { // 核实成功
        this.form.call_result = '1'
      } else if (this.checks === '3') { // 放弃核实
        this.form.call_num = ''
        this.form.check_item = [] // 放弃核实的时候，不要检查项
        this.form.call_result = '3'
        this.form.check_remark = this.form.check_forgive_remark // 赋值
      }
      // 调取审核接口
      secondCheck(this.form).then(response => {
        this.$message({
          message: '审核完成',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$router.push({ path: '/order/dashboard' })
          }
        })
      })
    }
  }
}
</script>

<style scoped>
  .no-pic {
    text-align: center;
  }
  .no-pic img {
    margin-top: 160px;
  }
  .no-pic p {
    color: #4d4d4d;
    padding: 10px 0;
  }
  .bankcard .el-form-item {
    border-bottom: solid 1px #dbdbdb;
  }
  .order-button {
    margin-top: 10px;
  }
  .order-button button {
    width: 100%;
  }
  .el-tab-pane {
    border-right: solid 1px #fff;
  }
  .trial-title-right {
    font-size: 14px;
    font-weight: normal;
    float: right;
    color: #3fb2fe;
    cursor: pointer;
  }
  .trial-title-right:hover {
    text-decoration: underline;
  }
  .trial-content {
    font-size: 14px;
    padding: 0 0 0 10px;
    line-height: 24px;
  }
  .trial-tips {
    padding: 10px;
    font-size: 16px;
    color: #ff7357;
  }
  .trial-tips svg {
    font-size: 18px;
    margin-right: 10px;
  }
  .scrollList {
    height: 1000px;
    overflow-y: scroll;
  }
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
    background-color: #ccc;
    border-color: #ccc;
    color: #fff;
  }
  .check ul {
    padding-left: 0;
  }
  .check ul li{
    list-style: none;
    padding-bottom: 30px;
    /* border-bottom: 1px solid #dcdfe6; */
  }
  .title{
    margin-bottom: 15px;
  }
  .title i{
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-style: normal;
    display: inline-block;
    text-align: center;
    background-color: #109ef0;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
  }
  .title > span {
    font-size: 16px;
    margin-left: 10px;
    color: #303133;
  }
  .title p{
    float: right;
    color: #909090;
    font-size: 15px;
    margin:0;
    line-height: 22px;
  }
  .content {
    width: 100%;
    background-color: #f5f7fa;
    margin-top: 25px;
    border-radius: 5px;
    padding-bottom: 30px;
  }
  .content span:first-child {
    font-size: 14px;
    margin: 25px 0 25px 23px;
    display: inline-block;
    color: #909090;
  }
  .content span:nth-child(2) {
    float: right;
    color: #ff5f5f;
    margin:25px 23px 0 0;
    font-size: 14px;
  }
  .content div span:first-child {
    font-size: 14px;
    margin: 25px 0 25px 23px;
    display: block;
    color: #909090;
  }
  .content p {
    width: 90%;
    margin:0 auto;
    padding: 15px;
    background-color: #fff;
    line-height: 1.5;
    border-radius: 5px;
    color: #303133;
    font-size: 14px;
  }
  .content div {
    width: 90%;
    margin:0 auto;
    padding: 15px;
    background-color: #f0f0fa;
    line-height: 1.5;
    border-radius: 5px;
    color: #303133;
    font-size: 14px;
  }
  .content > div span:first-child {
    margin: 0;
    color: #666;
  }
  .content > div span:nth-child(2) {
    border-top: 1px solid #8c8c8c;
    float: none;
    color: #666;
    display: block;
    margin-top: 10px;
    padding-top: 10px;
  }
  .classify {
    font-size: 14px;
    background-color:#fff;
    padding-right: 20px;
  }
  .classify ul {
    border: 1px solid #dcdfe6;
    padding-left: 0;
    border-radius: 5px;
    background-color: #eeeeee;
    height: 302px;
    overflow: auto;
  }
  .classify ul > li {
    list-style: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .classify ul li:hover {
    background-color:  #d2d2d2;
  }
  ul > li:last-child {
    border:none;
  }
  .el-popper[x-placement^=bottom] {
    top: 300px;
  }
  .el-input--suffix .el-input__inner{
    padding-right: 260px;
  }
  .back-link{
    cursor: pointer;
  }
  .el-tabs--border-card>.el-tabs__content{
  	padding: 25px;
  }
  .el-radio__label{
  	margin-left: -30px;
  }
  .el-radio+.el-radio{
  	margin-left: 30px;
  }
  .radiogroup .el-radio {
    margin-right: 80px;
  }
  .el-form-item {
    padding-top: 0px;
    padding-bottom: 20px;
  }
  .textarea .el-form-item__content{
  	margin: 30px 0 0 0 !important;
  	padding: 20px 0 0 0;
    resize: none;
  }
  .trial {
  	width:100%;
    margin-bottom: 10px;
  }
  .scroll-show{
  	max-height: 370px;
  	overflow-y: scroll;
  }
  .trial > p:before,.textarea .el-form-item__label:before{
  	content: "";
  	display: inline-block;
  	width: 4px;
  	height: 16px;
  	background: #109ef0;
  	position: relative;
    top: 2px;
    left: -5px;
  }
  .el-form-item{
  	margin-bottom: 0;
  	padding: 12px 0;
  }
  .trial > p,.textarea .el-form-item__label{
  	text-indent: 5px;
  	color: #858585;
    font-weight: bold;
  	font-size: 16px;
  }
  .use-botton {
  	text-align: center;
  }
  .use-botton button {
  	width: 28%;
  	margin: 10px 1%;
  }
</style>
